@function rad($angle) {
  $unit: unit($angle);
  $unitless: $angle / ($angle * 0 + 1);

  @if $unit == deg {
    $unitless: $unitless / 180 * pi();
  }
  @return $unitless;
}
@function pi() {
  @return 3.14159265359;
}

@function fact($number) {
  $value: 1;
  @if $number > 0 {
    @for $i from 1 through $number {
      $value: $value * $i;
    }
  }
  @return $value;
}

@function pow($number, $exp) {
  $value: 1;
  @if $exp > 0 {
    @for $i from 1 through $exp {
      $value: $value * $number;
    }
  } 
  @else if $exp < 0 {
    @for $i from 1 through -$exp {
      $value: $value / $number;
    }
  }
  @return $value;
}

@function sin($angle) {
  $sin: 0;
  $angle: rad($angle);
  // Iterate a bunch of times.
  @for $i from 0 through 10 {
    $sin: $sin + pow(-1, $i) * pow($angle, (2 * $i + 1)) / fact(2 * $i + 1);
  }
  @return $sin;
}

@function cos($angle) {
  $cos: 0;
  $angle: rad($angle);
  // Iterate a bunch of times.
  @for $i from 0 through 10 {
    $cos: $cos + pow(-1, $i) * pow($angle, 2 * $i) / fact(2 * $i);
  }
  @return $cos;
}

@function tan($angle) {
  @return sin($angle) / cos($angle);
}

//vars
// $fg: #e91e63;
// $bg: #8bc34a;
// #00bca4
$fg:#00bcd4;
$hfg:#00aca4;
$bg:#673ab7;
$pi: 3.14;

//config
$menu-items: 6+1;
$open-distance: 80px;
$opening-angle: $pi*2;

a {
  color: inherit;
}
h1,
h2,
h3,
h4 {
  margin: 0;
  margin-bottom: 10px;
  margin-top: 10px;
}
h1 {
  font-size: 3em;
}
%goo {
  filter: url("#goo");
  // debug
  // background:rgba(255,0,0,0.2);
}
%ball {
  background: $fg;
  border-radius: 100%;
  width: 60px;
  height: 60px;
  margin-left: -30px;
  position: absolute;
  top: 10px;
  color: white;
  text-align: center;
  line-height: 60px;
  transform: translate3d(0, 0, 0);
  transition: transform ease-out 200ms;
}
.menu-open {
  display: none;
}
.menu-item {
  @extend %ball;
}
.hamburger {
  $width: 25px;
  $height: 3px;
  width: $width;
  height: $height;
  background: white;
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -$width/2;
  margin-top: -$height/2;
  transition: transform 200ms;
}
$hamburger-spacing: 8px;
.hamburger-1 {
  transform: translate3d(0, -$hamburger-spacing, 0);
}
.hamburger-2 {
  transform: translate3d(0, 0, 0);
}
.hamburger-3 {
  transform: translate3d(0, $hamburger-spacing, 0);
}
.menu-open:checked + .menu-open-button {
  .hamburger-1 {
    transform: translate3d(0, 0, 0) rotate(45deg);
  }
  .hamburger-2 {
    transform: translate3d(0, 0, 0) scale(0.1, 1);
  }
  .hamburger-3 {
    transform: translate3d(0, 0, 0) rotate(-45deg);
  }
}
.menu {
  @extend %goo;
  $width: 380px;
  $height: 250px;
  position: absolute;
  left: 50%;
  margin-left: -$width/2;
  padding-top: 20px;
  padding-left: $width/2;
  width: $width;
  height: $height;
  box-sizing: border-box;
  font-size: 20px;
  text-align: left;
}

.menu-item {
  &:hover {
    background: $hfg;
    // color: $fg;
    color: white;
  }
  &:focus {
    background: #009ca4;
    // color: $fg;
    color: white;
  }
  @for $i from 1 through $menu-items {
    &:nth-child(#{$i + 2}) {
      transition-duration: 180ms;
    }
  }
}

.menu-open-button {
  @extend %ball;
  z-index: 2;
  transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition-duration: 400ms;
  transform: scale(1.1, 1.1) translate3d(0, 0, 0);
  cursor: pointer;
}
.menu-open-button:hover {
  transform: scale(1.2, 1.2) translate3d(0, 0, 0);
}
.menu-open:checked + .menu-open-button {
  transition-timing-function: linear;
  transition-duration: 200ms;
  transform: scale(0.8, 0.8) translate3d(0, 0, 0);
}

.menu-open:checked ~ .menu-item {
  transition-timing-function: cubic-bezier(0.935, 0, 0.34, 1.33);
  @for $i from 1 through $menu-items {
    $angle: (($pi - $opening-angle)/2)+(
        ($opening-angle/($menu-items - 1))*($i - 1)
      );

    &:nth-child(#{$i + 2}) {
      transition-duration: 80ms+(100ms*$i);
      transform: translate3d(
        cos($angle)*$open-distance,
        sin($angle)*$open-distance,
        0
      );
    }
  }
}
